<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script>
</head>
<body>
  <div id="app">
    <!-- 方式2-通过v-on -->
    <img :src="staffPhoto" ref="imgRef" id="img" @error="onError"/>
  </div>
</body>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        // staffPhoto:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        staffPhoto:'https://localhost:8080/undefined.jpeg'
      }
    },
    created() {},
    mounted() {
      // document.getElementById('img').onload = function(){
      //   console.log('图片加载成功')
      // }
      // 方式1-通过ref得到页面元素,执行监听
      let that = this
      /*
      this.$refs.imgRef.onerror = ()=>{
        console.log('图片加载失败')
        // this.src = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        // that.staffPhoto = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        this.staffPhoto = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
      }
      */
      // this.$refs.imgRef.
    },
    methods: {
      onError(){
        this.staffPhoto = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'

      }
    },
  })
</script>
</html>
